<template>
    <div class="diskInfoWrap">
        <el-button type="primary" icon="el-icon-refresh" style="margin-bottom: 5px" size="small" @click="getList">刷新</el-button>
        <tableList
            :data="listDetails"
            border
            maxHeight="300"
            :loading="loading"
            :keySet="keySet"
            :tableData="listDetails"
            :paginationShow="true"
            :pageNumber="pages.current"
            :pageSize="pages.size"
            :total="pages.total"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"
        ></tableList>

        <div class="head" >
          <p class="colCLas"></p>
            <p class="info">批量获取预赋码</p>
        </div>
        <div
            class="creditContent"
            style="display: flex; justify-content: start; align-items: center"
        >
            <el-form
                :inline="true"
                :model="searchParams"
                style="width: 100%"
                size="small"
                :rules="rules"
                ref="formRef"
            >
                <el-form-item label="领用数量:" style="max-width: 250px">
                    <el-input-number
                        style="width: 160px"
                        v-model="searchParams.input1"
                        :controls="false"
                        :min="1"
                        :max="5000"
                        :step="1"
                        :precision="0"
                    ></el-input-number>
                    <span>&nbsp; &nbsp;张</span>
                </el-form-item>

                <el-form-item
                    label="审批人:"
                    style="max-width: 340px"
                    prop="select1"
                >
                    <el-select
                        style="width: 160px"
                        v-model="searchParams.select1"
                        placeholder="请选择"
                    >
                      <el-option
                          v-for="option in select1"
                          :key="option.value"
                          :label="option.label"
                          :value="option.value"
                      ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <div style="margin-bottom: 6px">事项说明：（限制录入500字）</div>
        <el-input
            type="textarea"
            placeholder="请输入"
            v-model="textarea"
            maxlength="500"
            show-word-limit
            :rows="4"
            resize="none"
        ></el-input>
        <div style="margin-top: 8px; display: flex; justify-content: center">
            <el-button
                type="primary"
                @click="applyFn"
                v-if="hasAuth('VMS_FULL_YFM_BUTTON_SHOW')"
            >
                申请
            </el-button>
        </div>

    </div>
</template>

<script>
import mixinTable from '@/mixin/mtable.js'
import tableList from '@/components/tableList/index.vue'
import { queryVmsFullYfmMessage } from '@/api/presharecode/preShareCode.js'
import { getFlowData, saveOrSubmit } from '@/api/businessFlow.js'
export default {
    name: 'preShareCode',
    mixins: [mixinTable],
    data() {
        return {
            loading:false,
            textarea: '',

            busType :'FLOW_YFMLY',
            busId:'',
            createTime:'',
            listDetails: [],
            select1:[],
            keySet: [
                {
                    label: '领用数量',
                    englishName: 'lysl',
                },
                {
                    label: '号段获取日期',
                    englishName: 'sucessedTime',
                },
                {
                    label: '使用号段起',
                    englishName: 'fpqshm',
                },
                {
                    label: '使用号段止',
                    englishName: 'fpzzhm',
                },
                {
                    label: '当前发票号码',
                    englishName: 'dqdsyfphm',
                },
                {
                    label: '号段剩余总数',
                    englishName: 'hdsyzs',
                },
            ],

            rules: {
                select1: [
                    {
                        required: true,
                        message: '请选择审批人',
                        trigger: 'change',
                    },
                ],
            },

        }
    },
    created() {
        this.getList()
        this.getFlow()
    },
    methods: {
      applyFn () {
        //   if(!this.busType)return this.$message.error('已成功提交，请勿重复提交!')
        if(this.searchParams.input1 ===0 || this.searchParams.input1 ===undefined || this.searchParams.input1 ==='' )return this.$message.error('请输入领用数量!')

          this.$refs.formRef.validate(async (valid) => {
            if(!valid) return;
            let params = {
              "busType": this.busType,
              "busData": JSON.stringify({lysl:this.searchParams.input1}),
              "approvalUser": this.searchParams.select1,
              "description": this.textarea,
              "busId":this.busId,
              "createTime":this.createTime,
              "submit": true

            }
            let {data, code, message} = await saveOrSubmit(params)
            if (code == 200) {
              await this.getList()
              await this.getFlow()
            //   this.busType = "";
              this.searchParams.input1 = "";
              this.textarea = ""
              return this.$message.success("发起批量获取预赋码申请成功！")
            } else {
            //   this.$message({
            //     type: 'success',
            //     message: message,
            //   })
            }

            })
        },
        handleChange(val) {
          //this.$refs.formRef.validateField('input1');
        },

        async getList() {
            // this.listDetails = []
            this.loading = true
            let params = {
              pageNo: this.pages.current,
              pageSize: this.pages.size,
            }
            let { data, code, message } = await queryVmsFullYfmMessage(params)
            if (code == 200) {
                this.loading = false
                this.listDetails = data.records.map(item=>{
                    return {
                        ...item
                    }
                });
                this.pages.total = data.total
                this.pages.current = data.current
                this.pages.size = data.size
            } else {
                this.loading = false
                // this.$message({
                //     type: 'success',
                //     message: message,
                // })
            }
        },

      async getFlow() {
        let  data2 ={
          busType : "FLOW_YFMLY"
        }
        let { data, code, message } = await getFlowData(data2)
        if (code == 200) {
          if (data && data.approvalUserList) {
            this.select1 = data.approvalUserList.map(user => {
              return {
                value: user.userCode,
                label: user.fullName
              };
            });
            if(Array.isArray(this.select1)&& this.select1.length){
               this.searchParams.select1 = this.select1[0].value
            }
          }
          this.busId =data.busId
          this.createTime=data.createTime
        }
      },
    },
    components: {
        tableList,
    },
}
</script>

<style lang = "scss" scoped>
@import '@/style/variables.scss';
.diskInfoWrap {
    box-sizing: border-box;
    // padding: 10px;
    .head {
        display: flex;
        height: 18px;
        align-items: center;
        margin-bottom: 4px;
        margin-top: 4px;
        .colCLas {
            width: 4px;
            height: 100%;
            background-color: $allBg;
            margin-right: 12px;
        }
        .info {
            height: 100%;
            display: flex;
            align-items: center;
        }
    }
    .creditContent {
        margin-bottom: 10px;
        :deep .el-form-item--small.el-form-item {
            margin-bottom: 0;
        }
    }
}
</style>
